<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目问卷预览</title>
    <%@include file="../../../common/includeBaseSet.jsp" %>
	<%@include file="../../../common/includeSystemSet.jsp" %>
	<%@include file="../../../common/operation_forbid.jsp" %>
	<%@include file="../../../common/jsVersion.jsp" %>
    <link rel="stylesheet" href="${jypath}/resources/css/questionnaireStyle.css">
    <script src="${jypath}/resources/js/jQuery.print.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    	.answer_ul{
			margin-left:40px
		}
    	.answer_li{
			float:left;
			list-style:none
		}
		a{cursor:pointer}
    </style>
</head>
<body>
	<div>
        <h1 style="text-align: center;">${name }(${fillInNum}人)</h1>
        <h2 style="text-align: center;">${projectName }</h2>
    </div>
    <div class="action-list margin-bottom-10 margin-left-30">
		<a href="#" onclick="backCustomer();" class="btn-action-primary">返回</a> 
	</div>
	<div class="questionnaire color444" id="questionnaire">
	    <div class="tab-box">
	        <div class="qs-main" style="width:80%">
	            <ol id="main_ol" class="qs-list qs-relation font12px">
					<!-- 问卷内容 -->
		        </ol>
	        </div>
	    </div>
	</div>
	
</body>
<script type="text/javascript" src="${jypath}/static/js/system/questionnaire/questionView.js"></script>
<script type="text/javascript">
	$(function(){
		//获取问题及答案
		var url = "${jypath}/customer/projectQuestion/questionAyalyzeList";
		loadQuestion(url, "${projectQuestionnaireId}");
	});
	//返回列表
	function backCustomer(){
		location.href = jypath + "/customer/projectQuestionnaire/analyzeList";
	}
	
	/**
	 *查询已保存的问题
	 *先查询所有1级问题，然后用递归获取每个1级问题下的子集
	 */
	var html_2 = ""; //用于记录问题子集的html
	function loadQuestion(url, questionnaireId, customerId){
		var loadIndex = layer.load(1, {
	        shade: [0.1,'#fff'] //0.1透明度的白色背景
	    });
		
		$.ajax({
			type: 'post',
	        url: url,
	        data:{
	            "questionnaireId": questionnaireId,
	            "customerId": customerId,
	            "level": "1",
	        },
	        dataType: 'json',
	        success: function(data){
	        	if(data.res != "1"){
	        		return false;
	        	}
	        	var entity = data.obj.entity;
	        	var level = "1";
	        	var up_html = "";
	        	for(var i = 0; i < entity.length; i++){
	        		var info = entity[i];
	        		//组装html
	           		var html = questionHtml(info);
	        	    html_2 = ""; //查询子集前，先将子集内容清空
	        	    //使用递归组装子集问题模板
	        	    var html2 = loadQuestionHtml(url, Number(info.level)+1, info.problemCode, questionnaireId, customerId);
	        	    if(html2 != ""){
	        	    	html2 = html2 + '</li>';
	        	    }
	        	    html = html+html2 ;
	    			//当级别为1级时，追加在顶层<ol>中
	    		 	$("#main_ol").append(html);
	        	}
	        	//当有客户ID时，获取客户填写的答案
	        	if(customerId != undefined){
	        		getAnswer(questionnaireId, customerId);
	        	}
	        	layer.closeAll('loading'); //关闭加载层
	        }
		});
	}
	/**
	 *使用递归组装子集问题模板
	 *通过传入的问题级别（level）计算新的问题编号，然后查询对应的问题
	 */
	var oldLevel = ""; //保存上一次查询的问题的级别，用于判断是否拼接当前层级的开始或结束标签(<ol>)
	var num = 0; //计数器，用于判断是否有跳级的情况（由2.1.1 ==》 3，缺少2.2过渡）
	function loadQuestionHtml(url, level, problemCode, questionnaireId, customerId){
		//当层级为1时，退出递归
		if(level == "1"){
			return html_2;
		}
		//计算新问题编号
		var newProblemCode = "";
		var pc = problemCode.split(".");
		if(Number(level) > pc.length){
			//当问题层级大于编号层级时，表示查找下一级问题，在问题编号后拼接'.1'
			newProblemCode = problemCode + "." + 1;
		}else if(Number(level) < pc.length){
			//当问题层级小于编号层级时，表示查找上一级问题，去掉编号的最后一位数，并对新编号尾数+1
			for(var v = 0; v < pc.length-1; v++){
				if(v+1 < pc.length-1){
					newProblemCode += pc[v] + ".";
				}else{
					newProblemCode += Number(pc[v])+1;
				}
			}
		}

		$.when(loadQuestionAjax(url, questionnaireId, level, newProblemCode, customerId)).done(function(data){
			if(data.res != "1"){
	    		return html_2;
	    	}
	    	var entity = data.obj.entity;
	    	if(entity.length <= 0){
	    		if(html_2 != ""){
	    			html_2+= '</li>';
	    		}
	    		//当连续两次未查到上级时，拼接结束标签
	    		if(num > 1){
	    			html_2+= '</ol></li>';
	    		}
	    		num++;
	    		//递归计算上一级
	    		loadQuestionHtml(url, Number(level)-1, newProblemCode, questionnaireId, customerId);
	    	}else{
	    		num = 0;
	    		var info = entity[0];
				//当子集的内容为空或者当前级别比之前的问题级别高时，拼接层级开始标签
	    		if(html_2 == "" || Number(oldLevel) < Number(info.level)){
	    			html_2 += '<ol class="qs-list">';
	    		}else if(Number(oldLevel) > Number(info.level)){
	    			//当前级别比之前的问题级别低时，拼接层级结束标签
	    			html_2 += '</ol>';
	    		}
	    		oldLevel = info.level; //将当前层级赋值给全局变量，用于记录上级层级
	    		//组装html
	       		html_2 += questionHtml(info);
	       		//递归计算下一级
			    loadQuestionHtml(url, Number(level)+1, newProblemCode, questionnaireId, customerId);
	    	}
	    });
		
		return html_2;
	}
	/**
	 * 原本想用Deferred解决ajax同步导致页面假死的问题，但实际使用时发现并未生效
	 * 原因是在loadQuestionHtml()内可以达到同步加载，但在循环调用loadQuestionHtml()时会出现异步的情况
	 * 暂时先加上async: false，待后续优化
	 */
	function loadQuestionAjax(url, questionnaireId, level, newProblemCode, customerId){
		var defer = $.Deferred();
		$.ajax({
			type: 'post',
	        url: url,
	        data:{
	            "questionnaireId": questionnaireId,
	            "level": level,
	            "problemCode": newProblemCode,
	            "customerId": customerId
	        },
	        async: false,
	        dataType: 'json',
	        success: function(data){
	        	defer.resolve(data);
		    }
		});
		return defer.promise();
	}
	//组装html
	function questionHtml(info){
		var problemCode = info.problemCode;
		var pc = problemCode.replace(/./g, "_");
		var html = '<li level="'+info.level+'" questionId="'+info.id+'" answerType="'+info.answerType+'" isRequired="'+info.isRequired+'">';
		var isRequired = "";
		if(info.isRequired == "1"){
			isRequired = "（必答题）";
		}
		html += '<h3 id="h3_'+info.id+'">'+problemCode+' '+info.question+isRequired+'(<font style="color: orange;">'+info.textRate+'%</font>)</h3>';
		
		var describe = info.questionnaireDescribe;
	    if(describe != ""){
	    	//当有问题描述时展示问题描述
	    	html+= '<p class="qs-note color999">'+describe+'</p>';
	    }
	    html += '<div class="qs-item">';
	    if(info.answerType == "1"){
	    	//当答案为单选框时
	    	var json = eval(info.arrayJson);
		    for(var i = 0; i < json.length; i++){
		    	if(json[i].answer != "select_other"){
		    		html += '<label>';
				    html += '<input type="radio" disabled="disabled" value="'+json[i].id+'" name="radioAnswer_'+info.id+'" >&nbsp;';
				    if(json[i].rate == 0){
				    	html += '<span class="radio-txt">'+json[i].answer+'</span>';
				    }else{
					    html += '<span class="radio-txt">'+json[i].answer+'(<font style="color: green">'+json[i].rate+'%</font>)</span>';
				    }
				    html += '</label>';
		    	}else{
		    		html += '<br/><input type="radio" disabled="disabled" value="'+json[i].id+'" name="radioAnswer_'+info.id+'" at="select_other">&nbsp;';
		    		if(json[i].rate == 0){
		    			html += '其他：';
				    }else{
				    	html += '其他：(<font style="color: green">'+json[i].rate+'%</font>)';
				    }
		    	}
		    }
	    }else if(info.answerType == "2"){
	    	//当答案为复选框时
	    	var json = eval(info.arrayJson);
		    for(var i = 0; i < json.length; i++){
		    	if(json[i].answer != "select_other"){
			    	html += '<label>';
				    html += '<input type="checkbox" disabled="disabled" value="'+json[i].id+'" name="checkAnswer_'+info.id+'">&nbsp;';
				    if(json[i].rate == 0){
				    	html += '<span class="radio-txt">'+json[i].answer+'</span>';
				    }else{
				    	html += '<span class="radio-txt">'+json[i].answer+'(<font style="color: green">'+json[i].rate+'%</font>)</span>';
				    }
				    html += '</label>';
		    	}else{
		    		html += '<br/><input type="checkbox" disabled="disabled" value="'+json[i].id+'" name="checkAnswer_'+info.id+'" at="select_other">&nbsp;';
		    		if(json[i].rate == 0){
		    			html += '其他：';
				    }else{
				    	html += '其他：(<font style="color: green">'+json[i].rate+'%</font>)';
				    }
		    	}
		    }
	    }else if(info.answerType == "3"){
	    	//当答案为填空时
	    	/* html += '<input type="text" class="qs-input" id="input_'+info.id+'" style="width:100%">'; */
	    }
	    html += '</div>';
	    return html;
	}
</script>
</html>
